<template>
	<div>
		<div id="container"></div>
		<div class="input-card">
			<!-- <button class="btn" @click="stopedit">结束编辑</button> -->
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { fetchShopList } from '@/api/shop.js'
import { cloneDeep } from 'lodash'
export default {
	name: '',
	data() {
		return {
			url: common.url,
			head_url: common.head_url,
			polyEditor: '',
			path: this.toSonData,
			shopList: []
		}
	},
	props: ['toSonData', 'coordinatesData', 'allAreaMesData'], //props接收
	async created() {
		try {
			// let ret = await fetchShopList({
			// 	sign_status: 30,
			// 	status: 1,
			// 	fields: 'id,name,shop_sn,location,qualifications'
			// })

			// var arr = new Array()
			// ret.list.forEach((element, index) => {
			// 	arr.push(element.location.coordinates)
			// 	arr[index][0] = element.location.coordinates[0] *= 1
			// 	arr[index][1] = element.location.coordinates[1] *= 1
			// 	arr[index][2] = element.name
			// 	arr[index][3] =
			// 		element.qualifications.logo != ''
			// 			? this.head_url + element.qualifications.logo
			// 			: this.head_url + 'images/1600224875141_73fc324b'
			// })
			this.shopList = []
		} catch (err) {
			console.log(err)
		}
	},
	watch: {
		allAreaMesData: {
			handler(newName, oldName) {
				if (!newName) return
				console.log(this.toSonData)
				var that = this
				var marker,
					map = new AMap.Map('container', {
						center: [116.471354, 39.994257],
						zoom: 16.8
					})

				//画电子围栏
				marker = new AMap.Marker({
					icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					position: [this.coordinatesData[1], this.coordinatesData[0]], //中心点
					offset: new AMap.Pixel(-13, -30),
					size: new AMap.Size(30, 28), //图标所处区域大小
					imageSize: new AMap.Size(30, 28) //图标大小
				})
				marker.setMap(map)

				var path = cloneDeep(this.toSonData)
				// var path = this.toSonData

				var polygon = new AMap.Polygon({
					path: path,
					strokeColor: '#FF33FF',
					strokeOpacity: 0.2,
					fillOpacity: 0.4,
					fillColor: '#1791fc',
					zIndex: 50
				})

				map.add(polygon)

				//画第n个电子围栏
				this.allAreaMesData.forEach(element => {
					var polygon = new AMap.Polygon({
						path: element.coordinates_list,
						strokeColor: '#D1C34D',
						strokeOpacity: 0.2,
						fillOpacity: 0.4,
						fillColor: '#E86E03',
						zIndex: 50
					})
					map.add(polygon)
				})

				// 缩放地图到合适的视野级别
				map.setFitView([polygon])

				this.polyEditor = new AMap.PolyEditor(map, polygon)

				this.polyEditor.open()

				this.polyEditor.on('end', function (event) {
					// console.log(event.target)
					var path =
						(event.target && event.target.Ce && event.target.Ce.path) ||
						(event.target && event.target.De && event.target.De.path)
					that.path = that.objToArr(path)
					// console.log(that.path)
				})
			},
			immediate: true
		}
	},
	mounted() {},
	methods: {
		//新建
		createPolygon() {
			this.polyEditor.close()
			this.polyEditor.setTarget()
			this.polyEditor.open()
		},
		stopedit() {
			this.polyEditor.close()
			this.sendMsg()
		},
		//子向父传值
		sendMsg() {
			this.$emit('func', this.path)
		},
		objToArr(obj) {
			var arr = []

			for (let i in obj) {
				arr.push([obj[i].lng, obj[i].lat])
			}
			return arr
		}
	},
	filters: {}
}
</script>

<style scoped>
#container {
	width: 80%;
	height: 1000px;
}
.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
	background-color: transparent;
	background-image: none;
	color: #25a5f7;
	border-color: #25a5f7;
	padding: 0.25rem 0.5rem;
	line-height: 1.5;
	border-radius: 1rem;
	-webkit-appearance: button;
	cursor: pointer;
}

.btn:hover {
	color: #fff;
	background-color: #25a5f7;
	border-color: #25a5f7;
	text-decoration: none;
}

.btn:focus {
	outline: none;
}

.input-card {
	margin-top: 20px;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Mapareaedit.vue